<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page import="org.apache.struts.taglib.html.Constants" %>
<%@ page import="org.apache.struts.Globals" %>
<%@page import="live.common.Format"%>
<%@page import="org.apache.struts.util.TokenProcessor"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
TokenProcessor.getInstance().saveToken(request);
%>


<!doctype html>

<html style="overflow:hidden">

<head>
<base href="<%=basePath %>">
<META content="text/html; charset=UTF-8" http-equiv="Content-Type">
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<link rel="stylesheet" type="text/css" href="hfcz/css/grids.css" />
<LINK media="all" href="/css/global.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="hfcz/css/fp_2011.css"  />
<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>

<title>充话费-充值中心</title>
<style>
<!--
.telephone{
height: 300px; background-image: url('/images/nybg.gif'); margin-top: 0px;padding-left: 20px;
}
-->
</style>
</head>



<body class="telephone">
			
			<form class="tel-form" id="J_TelForm" method="get" action="/hfcz/directFill.do" target="_parent"
			 
			 onsubmit="return valPost()">
			<input type="hidden" name="org.apache.struts.taglib.html.TOKEN" value="<%=session.getAttribute("org.apache.struts.action.TOKEN")%>"/>  
			<!--号码-->

			<div class="tel-section tel-num">

				<label class="tel-section-title" for="J_TelInput">手机号：</label>

				<div class="tel-section-field">

					<div class="tel-num-wrapper" id="J_TelInputBox">

                        <input class="tel-num-input" id="J_TelInput" maxlength="11" autocomplete="off" name="phone" type="text" value="请输入充值号码"/>

					</div>

				</div>

			</div>

			<!--二次确认-->

			<div class="tel-section tel-num tel-num-cfm" style="display: block" id="J_TelInputCfmPanel">

				<label class="tel-section-title" for="J_TelInputCfm">确认号码：</label>

				<div class="tel-section-field">

					<div class="tel-num-wrapper" id="J_TelInputCfmBox">

						<input class="tel-num-input" id="J_TelInputCfm" maxlength="11" autocomplete="off" name="phone-cfm" type="text" value="再次输入号码" />

					</div>

					<span class="tel-num-msg" id="J_TelInputCfmMsg"></span>

				</div>

			</div>


			<!--充值方式-->

			<div class="tel-section tel-method" id="J_TelMethodPanel">

				<label class="tel-section-title">充值方式：</label>

				<div class="tel-section-field">

					<div class="tel-method-radio" id="J_TelMethod">

						<p>

							<input id="J_MethodRadioEcard" type="radio" value="0" checked="checked" />

							<label for="J_MethodRadioEcard">自动充值<span>（1-10分钟充值到帐）</span></label>

						</p>
					</div>
				</div>

			</div>

			<!--面值-->

			<div class="tel-section" style="height: auto;">

				<label class="tel-section-title">面&nbsp;&nbsp;&nbsp;值：</label>

				<div class="tel-section-field tel-denomination" id="J_TelDenomination">

					<!-- modified by mbn 加入input的值，以供取pidvid判断 start-->

					<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />

					<label for="J_Denomination100">100元</label>

					<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />

					<label class="label-short" for="J_Denomination50">50元</label>


				</div>
			</div>
			
			<!--售价-->

			<div class="tel-section" style="margin-top: 5px">

				<label class="tel-section-title" id="J_TelPriceLabel">售&nbsp;&nbsp;&nbsp;价：</label>

				<div class="tel-section-field">

					<span class="tel-price" id="J_TelPrice">0&nbsp;元</span>

				</div>

			</div>

			<!--立刻购买-->
			<div id="J_TelBuyPanel" style="margin-left: 40px;">
				<button class="searchform" id="J_TelSubmitBtn" type="button" onclick="toSubmit()" hidefocus="true">点击充值</button>
				<br/>
			</div><br/><br/>
			<%-- <input type="text" name="event_submit_do_buy" value="1" />--%>

			<input type="hidden" id="prodid"   name="prodid" value="" />
			
			<%-- <input type="text" id="discount"   name="discount" value="" />--%>
			
			<input type="hidden" id="realPrice"   name="realPrice" value="" />
		</form>
<script type="text/javascript"> 
  $("#J_TelInput").data("status", 0);
    function checkphone() {
        var x = $("#J_TelInput").val().replace(/\s/g, "");
        var tip = $("#J_TelInputMsg");
        if (x == ""&&x=="请输入充值号码") {
            $("#J_TelInput").data("status", 0);
            return false;
        } else {
            var patrn = /^(1[3,5,8])\d{9}$/;
            if (x != ""&&x!="请输入充值号码"&&!patrn.exec(x)) {
                tip.html("请输入正确的号码").show();
                $("#J_TelInputCfm").val("再次输入号码");
                $("#J_TelInput").data("status", 0);
                return false;
            }
        }
    }
    function valPost() {
        if ($("#J_TelInput").data("status") == 1) {
               return true; 
             }
        else {
            return false
             };
    }
    function telDenominationInit(){
    	var info='';
    	info+='<input id="J_Denomination100" type="radio" value="100" disabled="disabled" checked="checked" />'
		info+='<label for="J_Denomination100">100元</label>';
		info+='<input id="J_Denomination50" type="radio" value="50" disabled="disabled" />';
		info+='<label class="label-short" for="J_Denomination50">50元</label>';
		$("#J_TelDenomination").html(info);
		clear();
    }
    $(function () {
        $("#J_TelInput").blur(function () {
            var x = $(this).val().replace(/\s/g, "");
            if (x != ""&&x!="请输入充值号码") {
                var x1 = x.substring(0, 3);
                var x2 = x.substring(3, 7);
                var x3 = x.substring(7, 11);
                $(this).val(x1 + "" + x2 + "" + x3);
            }else{
            	$(this).val("请输入充值号码");
            	$("#J_TelInput").data("status", 0);
            }
            checkphone();
        }).focus(function () {
        	$(this).val("");
        	telDenominationInit();
        	$("#J_TelInputCfm").val("再次输入号码");
        	$("#J_TelInputCfmMsg").hide();
        	$("#J_TelInfoCfmBox").hide();
        	$("#J_TelInputMsg").hide();
        	$("#J_TelInputCfmPanel").show();
            $(this).val($(this).val().replace(/\s/g, ""));
            var rtextRange = $(this).get(0).createTextRange();
            rtextRange.moveStart('character', $(this).get(0).value.length);
            rtextRange.collapse(true);
            rtextRange.select();
        }).keyup(function () {
            if ($("#J_TelInputCfm").val() != ""&&$("#J_TelInputCfm").val() != "再次输入号码") {
                $("#J_TelInputCfm").val("再次输入号码");
                $("#J_TelInput").data("status", 0);
            }
            $("#J_TelInfoBox").hide();
            $("#J_TelInfoSelectPanel").hide();
            $("#tel_isChange").val("0"); /*是否改变运营商*/
            $(".tel-section").addClass("ie8bug");
            $("#J_TelInput").data("status", 0);
        });
        $("#J_TelInputCfm").focus(function(){
         if($(this).val()=="再次输入号码"){
         	$(this).val("");
         	$("#J_TelInput").data("status", 0);
         }
        }).blur(function(){
        	if($(this).val()==""){
        		$(this).val("再次输入号码");
        		$("#J_TelInput").data("status", 0);
        	}
        	if($(this).val()!=$("#J_TelInput").val()&& $("#J_TelInput").val()!="请输入充值号码"&&$("#J_TelInputMsg").html()!=""){
        			$("#J_TelInfoCfmBox").hide();
        			$("#J_TelInputMsg").html("两次输入不一致").show();
        			$(this).select();
        			$("#J_TelInput").data("status", 0);
        		}
        }).keyup(function(){
        	if($(this).val().length==11){
        		if($(this).val()!=$("#J_TelInput").val()){
        			$("#J_TelInfoCfmBox").hide();
        			$("#J_TelInputMsg").html("两次输入不一致").show();
        			$(this).select();
        			$("#J_TelInput").data("status", 0);
        		}else{
        		$("#J_TelInputMsg").hide();
        		$("#J_TelDenomination").show();
				$("#J_TelDenomination").html("<img src=\"images/ajax-loader.gif\"/>面值获取中……");
				setTimeout(function(){
				$("#J_TelInput").data("status", 0);
        			$.ajax({
                            type: "POST",
                            url: "hfcz/pro.do?op=getPros",
                            timeout: 5000,
                            dataType: "json",
                            async: false,
                            data: "phone=" + $.trim($("#J_TelInputCfm").val()),
                            success: function (data) {
                                if (typeof (data) != 'undefined') {
                                var proInfos="<select name=\"b\" id=\"b\" onchange=\"checkPro(this)\">";
                                $(data).each(function(i){
									proInfos+="<option alt=\""+data[i].prodId+"\" value='"+data[i].prodPrice+"'>"+data[i].prodContent+"</options><br>";
                                });
                                proInfos+="<\/select>";
                                $("#J_TelDenomination").html(proInfos+"元");
                                 defaultPro($('#b'));
                                        $("#J_TelZone").val(data.provincename);
                                        $("#J_TelISP").val(data.isptype);
                                } else {
                                    $("#J_TelDenomination").html("<font style='color:red'>暂无充值面额</font>");
                                }
                            }
						, error: function () {
						     $("#J_TelDenomination").html("<font style='color:red'>网络繁忙,请稍候重试</font>");
						}
                        });
                        },1000);
                        return true;
        		}
        	}
        });
        $("#J_TelInputCfm").blur(function () { checkphone() })
        $("#J_TelInfoChange").click(function () {
            $("#J_TelInfoSelectPanel").show();
            $("#tel_isChange").val("1")
            $(".tel-section").addClass("ie8bug");
        });
        $("input[name='denomination']").click(function () {
            if ($(this).val() == "100") { $("#J_TelPrice").html("99.5元"); } else { $("#J_TelPrice").html("49.8元"); }
        });
    })
    
    function toSubmit(){
    if(	$("#J_TelInput").data("status")==1){
    	$('#J_TelBuyPanel').html('<font>正在提交信息……</font>');
    	$('form:first').submit();
    	window.location.reload();
    	}
    }
    function defaultPro(obj){
 		$('#J_TelPrice').html($(obj).find("option:first").val()+"&nbsp;元");
 		$('#prodid').val($(obj).find("option:first").attr('alt'));
 		$('#realPrice').val($(obj).find("option:first").text());
 		$("#J_TelInput").data("status", 1);
    }
    function checkPro(obj){
 		$('#J_TelPrice').html($(obj).val()+"&nbsp;元");
 		$('#prodid').val($(obj).find("option:selected").attr('alt'));
 		$('#realPrice').val($(obj).find("option:selected").text());
 		$("#J_TelInput").data("status", 1);
    }
    function clear(){
    	$('#J_TelPrice').html("0&nbsp;元");
 		$('#prodid').val("");
 		//$('#discount').val("");
 		$('#realPrice').val("");
    }
</script>
	</body>
</html>



